﻿@model List<Stardust.ConfigCenterWeb.Code.Entities.ServerNode>
@{
    ViewBag.Title = "Stardust ConfigCenter";

    Stardust.Common.Enum.ServerNodeStatus status = 0;
    var statusStr = Request["status"];
    if (!string.IsNullOrEmpty(statusStr))
    {
        status = (Stardust.Common.Enum.ServerNodeStatus)int.Parse(statusStr);
    }
}

<h2>Server Nodes</h2>
<br />

<div class="margin10">
    <form method="get" action="">
        <div class="input-control text">
            <label>serviceName</label>
            <input type="text" name="serviceName" value="@Request["serviceName"]">
        </div>
        <div class="input-control text">
            <label>address</label>
            <input type="text" name="address" value="@Request["address"]">
        </div>
        <div class="input-control text">
            <label>version</label>
            <input type="text" name="version" value="@Request["version"]">
        </div>
        <div class="input-control text">
            <label>status</label>
            @Html.DropDownList("status", EnumHelper.GetSelectList(typeof(Stardust.Common.Enum.ServerNodeStatus), status))
        </div>
        <button type="submit" class="button primary">
            <span class="mif-search"></span>
            Search
        </button>

        <button type="button" id="show_add_button" class="button warning place-right">
            <span class="mif-plus"></span>
            Add
        </button>
    </form>
</div>
<div class="listview-outlook margin10" data-role="listview" id="lvNodes">
    @foreach (var gp in Model.GroupBy(x => x.ServiceName))
    {
    <div class="list-group">
        <span class="list-group-toggle">@gp.Key</span>
        <div class="list-group-content">
            @foreach (var item in gp)
                {
            <div class="list marked">
                <input type="hidden" class="data-id" value="@item.Id" />
                <input type="hidden" class="data-serviceName" value="@item.ServiceName" />
                <input type="hidden" class="data-address" value="@item.Address" />
                <input type="hidden" class="data-version" value="@item.Version" />
                <input type="hidden" class="data-status" value="@((int)item.Status)" />
                <input type="hidden" class="data-weight" value="@item.Weight" />
                <div class="list-content">
                    <div class="list-title">
                        <span class="place-right" title="Version">@item.Version</span>
                        @if (item.Status == Stardust.Common.Enum.ServerNodeStatus.Normal)
                                {
                        <span class="mif-spinner5 fg-green mif-ani-spin" title="Normal"></span>
                                }
                                else if (item.Status == Stardust.Common.Enum.ServerNodeStatus.Disconnect)
                                {
                        <span class="mif-warning fg-red mif-ani-flash" title="Disconnect"></span>
                                }
                                else if (item.Status == Stardust.Common.Enum.ServerNodeStatus.Disabled)
                                {
                        <span class="mif-not" title="Disabled"></span>
                                }

                        <a title="Address" href="@item.GetStardustUrl()" target="_blank">
                            @item.Address
                        </a>
                    </div>
                    <div class="list-remark" style="padding-left:1.8em; padding-top:0.3em;">
                        <span class="place-right" title="Weight"> @item.Weight</span>
                        <span title="HeartbeatTime">
                            @item.HeartbeatTime
                        </span>
                    </div>
                </div>
            </div>
                }
        </div>
    </div>
    }

</div>


<div class="padding20" data-role="dialog" id="add_dialog" data-overlay="true" data-close-button="true" data-overlay-color="op-dark">
    <form id="add_from">
        <h2>New Node : </h2>
        <div>
            <div class="input-control text">
                <input type="text" placeholder="ServiceName" class="data-address" name="ServiceName" id="add_serviceName">
            </div>
            <div class="input-control text">
                <input type="text" placeholder="Address" class="data-address" name="Address" id="add_address">
            </div>
            <div class="input-control text">
                <input type="text" placeholder="Version" class="data-version" name="Version" value="1.0" id="add_version">
            </div>
            <div class="input-control text data-address">
                <input type="text" placeholder="Weight" class="data-weight" name="Weight" value="0" id="add_weight">
            </div>
        </div>
        <p>
            <button type="button" id="add_button" class="button primary">
                <span class="mif-checkmark"></span>
                Add
            </button>
        </p>
    </form>
</div>

<div class="padding20" data-role="dialog" id="edit_dialog" data-overlay="true" data-close-button="true" data-overlay-color="op-dark">
    <form id="edit_from">
        <h2>service : <span class="data-name"></span> </h2>
        <div>
            <div class="input-control text">
                <input type="text" placeholder="Address" class="data-address" name="Address" id="update_address">
            </div>
            <div class="input-control text">
                <input type="text" placeholder="Version" class="data-version" name="Version" id="update_version">
            </div>
            <div class="input-control select">
                <select class="data-status" name="Status">
                    <option value="1">Normal</option>
                    <option value="2">Disconnect</option>
                    <option value="3">Disabled</option>
                </select>
            </div>
            <div class="input-control text">
                <input type="text" placeholder="Weight" class="data-weight" name="Weight" id="update_weight">
            </div>
        </div>
        <p>
            <input type="hidden" class="data-id" value="0" name="Id" id="update_id" />
            <input type="hidden" class="data-serviceName" value="" name="ServiceName" id="update_serviceName" />

            <button type="button" id="update_button" class="button primary">
                <span class="mif-checkmark"></span>
                Update
            </button>

            <button type="button" id="delete_button" class="button danger place-right">
                <span class="mif-cross"></span>
                Delete
            </button>
        </p>
    </form>
</div>

<script>

    function EmptyNotify(selector, name) {
        if ($.trim($(selector).val()).length == 0) {
            $.Notify({
                caption: 'Error',
                content: name + " can not be empty!",
                type: 'alert'
            });
            $(selector).focus();
            return true;
        }
        return false;
    }

    $("#show_add_button").click(function () {
        metroDialog.open("#add_dialog");
    });

    $("#add_button").click(function () {
        if (EmptyNotify("#add_serviceName", "ServiceName")) return;
        if (EmptyNotify("#add_address", "Address")) return;
        if (EmptyNotify("#add_version", "Version")) return;
        if (EmptyNotify("#add_weight", "Weight")) return;

        var data = $("#add_from").serialize();
        $.post("@Url.Action("EditAsync")", data, function () {
            location.reload();
        });
    });

    $("#lvNodes .list").dblclick(function () {
        var $this = $(this);
        var $dialog = $("#edit_dialog");
        $dialog.find(".data-id").val($this.find(".data-id").val());
        $dialog.find(".data-serviceName").val($this.find(".data-serviceName").val());
        $dialog.find(".data-name").text($this.find(".data-serviceName").val());
        $dialog.find(".data-address").val($this.find(".data-address").val());
        $dialog.find(".data-version").val($this.find(".data-version").val());
        $dialog.find(".data-status").val($this.find(".data-status").val());
        $dialog.find(".data-weight").val($this.find(".data-weight").val());
        metroDialog.open($dialog);
    });

    $("#update_button").click(function () {
        if (EmptyNotify("#update_address", "Address")) return;
        if (EmptyNotify("#update_version", "Version")) return;
        if (EmptyNotify("#update_weight", "Weight")) return;

        var data = $("#edit_from").serialize();
        $.post("@Url.Action("EditAsync")", data, function () {
            location.reload();
        });
    });

    $("#delete_button").click(function () {
        if (confirm("Are you sure?")) {
            var data = { nodeId: $("#update_id").val(), serviceName: $("#update_serviceName").val() };
            $.post("@Url.Action("DeleteAsync")", data, function () {
                location.reload();
            });
        };
    });
</script>